import { useState, useEffect } from 'react';
import { Layout, Menu, Popover, Button, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import LoginModal from './LoginModal';
import MaterialNav from './MaterialNav';
const { Header } = Layout;

const menuItems = [
  { key: 'video', label: '视频 | 实拍' },
  { key: 'template', label: '设计模板' },
  { key: 'ppt', label: 'PPT' },
  { key: 'photo', label: '摄影 | 人像' },
  { key: 'material', label: '素材导航' },
  { key: 'more', label: '…' },
];

const popoverContent = {
  enterprise: <span>咨询企业套餐</span>,
  vip: <span>赠下载账号</span>,
};
const HeaderNav: React.FC = () => {

  const [showLogin, setShowLogin] = useState(false);
  const navigate = useNavigate();
  const dl = () => {
    navigate('/login')
  }
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsSticky(window.scrollY > 80); // 80可根据实际调整
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <Header
      className={`header-nav ${isSticky ? 'sticky' : ''}`}
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 100,
        width: '100%',
        background: '#fff',
        boxShadow: '0 2px 8px #f0f1f2',
        padding: 0,
        height: 64,
        transition: 'height 0.2s',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        overflow: 'visible',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', height: 64, padding: '0 32px' }}>
        {/* Logo区 */}
        <div style={{ fontWeight: 700, fontSize: 28, color: '#faad14', marginRight: 24, display: 'flex', alignItems: 'center' }}>
          <span style={{ fontFamily: 'cursive', fontSize: 32, marginRight: 4 }}>包图</span>
          <span style={{ color: '#ff9800', fontSize: 18, fontWeight: 400 }}>ibaotu.com</span>
        </div>
        {/* 菜单区 */}
        <Menu
          mode="horizontal"
          style={{ flex: 1, borderBottom: 'none', fontSize: 16 }}
          defaultSelectedKeys={['video']}
        >
          {menuItems.filter(item => item.key !== 'material').map(item => (
            <Menu.Item key={item.key}>{item.label}</Menu.Item>
          ))}
          <Menu.Item key="enterprise">
            <Popover content={popoverContent.enterprise} placement="bottom">
              <span style={{ color: '#faad14', fontWeight: 600 }}>企业站</span>
            </Popover>
          </Menu.Item>
          <Menu.Item key="gov" style={{ color: 'red', fontWeight: 600 }}>
            政务图库
          </Menu.Item>
        </Menu>
        {/* 这里单独放 MaterialNav，且用相对定位对齐主导航 */}
        <div style={{ position: 'relative', marginLeft: 12, zIndex: 99999, overflow: 'visible' }}>
          <MaterialNav />
        </div>
        {/* 右侧区 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Popover content={popoverContent.vip} placement="bottom">
            <Button type="primary" ghost size="small" style={{ borderRadius: 16 }}>
              赠下载账号
            </Button>
          </Popover>
          <Button type="link">企业VIP授权</Button>
          <Button type="link">个人VIP</Button>
          <Avatar size={32} icon={<UserOutlined />} style={{ background: '#eee' }} />
          <Button type="link" onClick={dl}>登录/注册</Button>
        </div>
      </div>

      <LoginModal visible={showLogin} onClose={() => setShowLogin(false)} />
    </Header>
  );
};

export default HeaderNav; 